<template>
  <el-row>
    <el-col>
      <!--      <el-card class="layout-query">-->
      <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
        <el-form-item prop="imei">
          <el-input v-model="state.queryForm.key" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <!--      </el-card>-->

      <el-card>
        <el-space>
          <el-space>
            <el-button icon="Plus" type="primary" @click="addOrUpdateHandle()"
              >新增</el-button
            >
          </el-space>
          <el-space>
            <el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()"
              >批量删除</el-button
            >
          </el-space>
          <!--          <el-space>-->
          <!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="bulkTransfers()">批量转移</el-button>-->
          <!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button  icon="Plus" type="primary" @click="dialog()">过期设备充值</el-button>-->
          <!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button icon="Plus" type="primary" @click="dialog()">SIM充值</el-button>-->
          <!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="disposition()" v-if="userStore.user.superAdmin===1">设备年费配置</el-button>-->
          <!--          </el-space>-->
        </el-space>
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          class="layout-table"
          @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="id" label="商品ID" header-align="center" align="center"></el-table-column>
          <el-table-column prop="orderIdx" label="排序" header-align="center" align="center"></el-table-column>
          <ma-dict-column prop="goodsType" label="商品类型" dict-type="goods_type"></ma-dict-column>
          <el-table-column prop="goodsName" label="商品名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="goodsSubject" label="商品主题" header-align="center" align="center"></el-table-column>
          <el-table-column
            prop="goodsDetail"
            label="商品描述"
            header-align="center"
            align="center"
            show-overflow-tooltip></el-table-column>
          <el-table-column prop="amount" label="金额" header-align="center" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
          <el-table-column prop="params" label="参数" header-align="center" align="center" show-overflow-tooltip>
            <template #default="scpoe">
              <el-tag type="primary">{{ scpoe.row.params }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center">
            <template #default="scope">
              <el-button v-auth="'gps:device:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)"
                >修改</el-button
              >
              <el-button v-auth="'gps:device:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)"
                >删除</el-button
              >
              <!--              <el-button-->
              <!--                  v-auth="'gps:device:delete'"-->
              <!--                  type="primary"-->
              <!--                  link-->
              <!--                  @click="deleteBatchHandle(scope.row.imei)"-->
              <!--              >跟踪</el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useCrud } from '@/hooks'
import AddOrUpdate from '@/views/gps/renewal/orders/manage/add-or-update.vue'
import MaDictColumn from '@/components/ma-dict/ma-dict-column/index.vue'
const addOrUpdateRef = ref()
const queryRef = ref()
const state: IHooksOptions = reactive({
  dataListUrl: '/gps/pay/goods/list',
  deleteUrl: '/gps/pay/goods/delete',
  newParams: true,
  queryForm: {
    key: undefined
  }
})
const addOrUpdateHandle = (id?: string) => {
  addOrUpdateRef.value.init(id)
}

// function deleteHandle(id) {
//   ElMessageBox.confirm('确定进行删除操作?', '提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   }).then(() => {
//     deleteHandleApi(id).then((res) => {
//       ElMessage.success('删除成功')
//       getDataList()
//     })
//   })
// }

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } =
  useCrud(state)
</script>
